<template>
  <div v-loading="loading">
    <div class="search-common">
      <el-row class=" pt10">
        <el-button type="primary" size="mini" @click="addHandleClick()">添加</el-button>
      </el-row>
    </div>
    <div class="common-layout p10">

      <el-table :data="tableData" border size="mini">
        <el-table-column prop="login_account" width="100px" label="登录账号">
        </el-table-column>
        <el-table-column prop="name" label="登陆名称">
        </el-table-column>

        <el-table-column width="120px" label="账号类型">
          <template slot-scope="scope">
            {{scope.row.agent_num=='AG000'?'官方':'经纪商'}}
          </template>
        </el-table-column>

        <el-table-column prop="name" width="120px" label="经纪商">
          <template slot-scope="scope">
            {{scope.row.agent_num | filterAgent}}
          </template>
        </el-table-column>

        <el-table-column prop="contact_phone" label="联系人手机" width="130px">
        </el-table-column>

        <el-table-column prop="name" width="120px" label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.head_img" alt="" width="60" height="60">
          </template>
        </el-table-column>

        <el-table-column prop="name" width="90px" label="使用权限">

          <template slot-scope="scope">
            {{scope.row.status==0?'禁用':'启用'}}
          </template>

        </el-table-column>

        <el-table-column prop="publish_count" width="70px" label="已发布数量">
        </el-table-column>

        <el-table-column width="120px" label="商城权限">
          <template slot-scope="scope">
            {{scope.row.shopping_status==0?'禁用':'启用'}}
          </template>
        </el-table-column>
        <el-table-column prop="name" width="120px" label="直播权限">
          <template slot-scope="scope">
            {{scope.row.broadcast_status==0?'禁用':'启用'}}
          </template>
        </el-table-column>

        <el-table-column prop="simple_desc" width="250px" label="简介">
        </el-table-column>

        <el-table-column prop="last_time" width="95px" label="操作时间">
        </el-table-column>

        <el-table-column prop="operator_name" width="90px" label="操作人">
        </el-table-column>

        <el-table-column prop="address" label="操作" style="width:15%;">
          <template slot-scope="scope">
            <p>
              <el-button @click="editHandleClick(scope.row)" type="text" size="small">权限编辑</el-button>
            </p>
            <p>
              <el-button type="text" size="mini" v-if="scope.row.agent_num!=='AG000'" @click="openAndCloseAccount(scope.row)">
                {{scope.row.status==0?'启用账号':'禁用账号'}}
              </el-button>
            </p>
            <p>
              <el-button type="text" size="mini" @click="$router.push({name:'menu_agent_push',query:{id:scope.row.id}})">推送管理</el-button>
            </p>
            <p>
              <el-button type="text" size="mini" @click="resetPassowrd(scope.row.id)">重置密码</el-button>
            </p>
          </template>
        </el-table-column>
      </el-table>

      <page-pagination v-on:pageFun="pageFunNumber" :page="page" :pageSize="pageSize" :total="total">
      </page-pagination>

    </div>

    <common-dialog title="经纪商帐号权限" :base-dialog="agentDialog">
      <div slot="body">
        <el-form :model="agent_dialog" :rules="rules" ref="agent_dialog" size="mini" label-width="100px">
          <el-form-item label="帐号名称" prop="name">
            <el-input v-model="agent_dialog.name" auto-complete="off" placeholder="请输入帐号名称"></el-input>
          </el-form-item>

          <el-form-item label="经纪商" prop="agent_num" v-if="agent_dialog.agent_num!=='AG000'">
            <el-select v-model="agent_dialog.agent_num" placeholder="请选择经纪商">
              <el-option v-for="item of getAngents" :key="item.id" :label="item.name" :value="item.key"></el-option>

            </el-select>
          </el-form-item>

          <el-form-item label="头像" prop="head_img">
            <el-upload class="avatar-uploader" :action="upload" :show-file-list="false" accept="image/*" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="agent_dialog.head_img" :src="agent_dialog.head_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="登录账号" prop="login_account">
            <el-input v-model="agent_dialog.login_account" auto-complete="off" placeholder="请输入登录账号" :disabled="disabled"></el-input>
          </el-form-item>

          <el-form-item label="联系人手机" prop="contact_phone">
            <el-input v-model="agent_dialog.contact_phone" auto-complete="off" :maxlength="11"></el-input>
          </el-form-item>

          <el-form-item label="直播权限" prop="broadcast_status " v-if="agent_dialog.agent_num!=='AG000'">
            <el-select v-model="agent_dialog.broadcast_status" placeholder="直播权限">
              <el-option label="禁用" value="0"></el-option>

              <el-option label="启用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商城权限" prop="shopping_status">
            <el-select v-model="agent_dialog.shopping_status" placeholder="商城权限">
              <el-option label="禁用" value="0"></el-option>

              <el-option label="启用" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="简介" prop="simple_desc">
            <el-input type="textarea" v-model="agent_dialog.simple_desc" auto-complete="off" placeholder="请输入简介"></el-input>
          </el-form-item>

          <el-form-item label="" style="width:400px;">
            <el-button type="primary" @click="addAndEditMenu('agent_dialog')" :disabled="disabledbtn">确定</el-button>
            <el-button type="primary" @click="cancelDialog('agent_dialog')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </common-dialog>
  </div>

</template>

<style scoped>
.el-table__body {
  /* width: 99%!important; */
  table-layout: inherit !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px dashed #ccc;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>


<script>
import { mapGetters } from "vuex";
import pagePagination from "@/components/Common/pagePagination";
import commonDialog from "@/components/Common/CommonDialog";
import server from "@/service/index_c";
export default {
  data() {
    return {
      loading: true,
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      agentDialog: false,
      disabled: false,
      disabledbtn:false,
      upload: server.haibeiServerUpload(),
      agent_dialog: {
        id: "",
        name: "",
        agent_num: "",
        head_img: "",
        login_account: "",
        contact_phone: "",
        broadcast_status: "1",
        shopping_status: "1",
        simple_desc: "",
        login_pwd: "000000"
      },
      rules: {
        name: [{ required: true, message: "请输入帐号名称", trigger: "blur" }],
        role_desc: [
          { required: true, message: "请输入角色说明", trigger: "blur" }
        ],
        agent_num: [
          { required: true, message: "请选择经纪商", trigger: "blur" }
        ],
        login_account: [
          { required: true, message: "请输入登录帐号", trigger: "blur" }
        ],
        head_img: [{ required: true, message: "请上传头像", trigger: "blur" }],
        contact_phone: [
          { required: true, message: "请输入联系人手机", trigger: "blur" }
        ],
        simple_desc: [
          { required: true, message: "请输入简介", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.$store.dispatch("setAllAngentLists");
  },
  mounted() {
    this.queryServerRolesList();
  },
  computed: {
    ...mapGetters({
      getAngents: "getAllAngentLists"
    })
  },
  methods: {
    //启用和禁用账号
    openAndCloseAccount(item) {
      this.$confirm(
        `您确定要${item.status == 0 ? "启用" : "禁用"}该条数据吗`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          lockScroll: false
        }
      ).then(() => {
        this.changeStatus(item);
      });
    },

    async changeStatus(item) {
      let status = item.status == 0 ? "1" : "0";
      let res = await server.haiheiQueryOpenAndCloseAgentItem({
        id: item.id,
        status: status
      });
      if (res.success) {
        item.status = status;
        this.$message({
          type: "success",
          message: res.msg
        });
      }
    },
    // 重置密码
    resetPassowrd(id) {
      this.$confirm(`您确定要重置该经纪商的密码吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        lockScroll: false
      }).then(() => {
        server
          .haiheiResetPassowrdAgent({
            id: id
          })
          .then(res => {
            if (res.success) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
          });
      });
    },
    // 上传头像
    handleAvatarSuccess(res, file) {
      this.agent_dialog.head_img = res.url;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      } else {
        return true;
      }
    },
    //添加
    addHandleClick() {
      this.agentDialog = true;
      this.disabled = false;
      this.agent_dialog = {
        id: "",
        name: "",
        agent_num: "",
        head_img: "",
        login_account: "",
        contact_phone: "",
        broadcast_status: "1",
        shopping_status: "1",
        simple_desc: ""
      };
    },
    //编辑
    editHandleClick(item) {
      this.agentDialog = true;
      this.disabled = true;
       this.disabledbtn=true;
      this.agent_dialog = Object.assign({}, item);
    },
    // submit button
    addAndEditMenu(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
           this.disabledbtn=true;
          if (this.agent_dialog.id) {
            this.submitEditData(formName);
          } else {
            this.submitAddData(formName);
          }
        }
      });
    },
    async submitAddData(formName) {
      var params = Object.assign({}, this.agent_dialog);
      delete params["id"];
      let res = await server.haiheiQueryAddAgentItem(params);
      if (res.success) {
        this.agentDialog = false;
         this.disabledbtn=false;
        this.$refs[formName].resetFields();
        this.queryServerRolesList();
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    async submitEditData(formName) {
      var params = Object.assign({}, this.agent_dialog);
      let res = await server.haiheiQueryEditAgentItem(params);
      if (res.success) {
        this.agentDialog = false;
        this.$refs[formName].resetFields();
        this.queryServerRolesList();
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    },

    // 取消
    cancelDialog(formName) {
      this.$refs[formName].resetFields();
      this.agentDialog = false;
    },

    //分页
    pageFunNumber(page) {

      this.queryServerRolesList(page);
    },
    // 查询列表
    async queryServerRolesList(page = 1) {
      let res = await server.haiheiQueryAgentPageList({
        page: page,
        pageSize: this.pageSize
      });
      if (res.success) {
        this.loading = false;
        this.tableData = res.result.pageList;
        this.total = res.result.nums;
        this.page = res.result.page;
        this.pageSize = res.result.pageSize;
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    }
  },
  components: {
    commonDialog,
    pagePagination
  }
};
</script>
